<template>
	<view class="tkContainer">
		<view class="segmentWrapper">
			<view class="segement-item" v-on:click="onSegmentItem(0)">
				<view>进行中</view>
				<view class="cursor" v-if="segIndex==0"></view>
			</view>
			<view class="segement-item" v-on:click="onSegmentItem(1)">
				<view>已完成</view>
				<view class="cursor" v-if="segIndex==1"></view>
			</view>
			
		</view>
		
		<view class="listWrapper">
			<view v-for="item in dataList" class="item" :key="item.OrderId">
				<!-- <image class="item-icon"></image> -->
				<view class="item-header">
					<view class="item-title">单号:{{item.OrderId}}</view>
					<view class="item-time">{{item.AddTimeStr}}</view>
				</view>
				<view class="storename">{{item.Storename}}</view>
				<view v-for="shop in item.shops" class="shopItem">
					<!-- <image class="shop-icon"></image> -->
					<view class="shop-title">{{shop.ProductName}}</view>
					<view class="shop-price">¥{{(shop.Price/100).toFixed(2)}}</view>
					<view class="shop-nums">x{{shop.Nums}}</view>
				</view>
				<view class="item-bottom">
					<view class="item-bottom-total"><text class="shifu">实付:</text>¥{{(item.TotalPrice/100).toFixed(2)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../common/http.js';
	import common from '../../common/common.js';
	export default {
		data() {
			return {
				segIndex:0
			}
		},
		methods: {
			onSegmentItem(index) {
				console.log(index)
				this.segIndex = index
				
				this.refreshData()
			},
			refreshData() {
				http.post("/", {} , ()=>{
					
				})
			}
		}
	}
</script>

<style>
	.tkContainer {
		height: 100%;
		width: 100%;
		background-color: #F6F6F6;
	}
	.segmentWrapper {
		display: flex;
		justify-content: space-around;
		height: 45px;
		line-height: 40px;
		background-color: white;
	}
	.segement-item {
		position: relative;
		font-size: 18px;
	}
	.listWrapper {
		margin-top: 5px;
	}
	.cursor {
		position: absolute;
		background-color: #55CEC9;
		height: 3px;
		border-radius: 1px;
		width: 80px;
		left: 50%;
		margin-left: -40px;
		bottom: 0px;
	}
</style>
